<template>
    <div class="outmain ba_f">
        <div class="shuju_title mar_b20">
            <div class="shuju_title_text">
                <span>小程序列表</span>
            </div>
        </div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline searchform">
            <el-form-item label="应用名称">
                <el-input v-model="formInline.keywords" size="medium" placeholder="起输入应用名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit" size="medium">搜索</el-button>
            </el-form-item>
        </el-form>
        <div class="tabledata mar_t20">
            <el-table ref="multipleTable"
                      :data="list"
                      v-loading="listLoading"
                      :element-loading-text="elementLoadingText"
                      stripe
                      style="width: 100%">
                <el-table-column prop="uniacid" label="应用Id" width="150"></el-table-column>
                <el-table-column prop="name" label="应用名称"></el-table-column>
                <el-table-column label="支持渠道">
                    <template slot-scope="scope">
                        <div class="flex pad_tb_10">
                            <div class="flex-bet mar_l15 t_c widwidth">
                                <div class="iconimg mar_r5" v-show="scope.row.channel_arr && scope.row.channel_arr.indexOf('wechat')!= -1"><img class="image_all" src="../../assets/img/manager/wechat.jpg"></div>
                                <div class="iconimg mar_r5" v-show="scope.row.channel_arr && scope.row.channel_arr.indexOf('mini')!= -1"><img class="image_all" src="../../assets/img/manager/linkicon.png"></div>
                                 <div class="iconimg mar_r5"  v-show="scope.row.channel_arr && scope.row.channel_arr.indexOf('ali')!= -1"><img class="image_all" src="../../assets/img/manager/ali.png"></div>
                                 <div class="iconimg mar_r5"  v-show="scope.row.channel_arr && scope.row.channel_arr.indexOf('baidu')!= -1" ><img class="image_all" src="../../assets/img/manager/baidu.png"></div>
                                 <div class="iconimg mar_r5"  v-show="scope.row.channel_arr && scope.row.channel_arr.indexOf('zijie')!= -1" ><img class="image_all" src="../../assets/img/manager/zijie.png"></div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="门店模式">
                    <template slot-scope="scope">
                        <div class="flex pad_tb_10">
                            <div class="flex-bet mar_l15 t_c widwidth">
                                <div class="iconimg mar_r5" v-if="scope.row.shopModel=='单门店'">{{scope.row.shopModel}}</div>
                                <div class="iconimg mar_r5"  v-if="scope.row.shopModel=='多门店'" >{{scope.row.shopModel}} (门店数量:{{scope.row.shopNum}})</div>

                            </div>
                        </div>
                    </template>
                </el-table-column>
<!--                <el-table-column prop="num" label="店铺数量"></el-table-column>-->
                <el-table-column prop="endTime" label="到期时间"></el-table-column>
                <el-table-column label="操作" width="230">
                    <template slot-scope="scope">
                        <el-button type="mini" @click="hrefadd(scope.row.uniacid)" class="el-edit minibutton">编辑
                        </el-button>
                        <!--<el-button size="mini" type="danger" @click="del(scope.row.id)" class="minibutton">删除</el-button> -->
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="page.total"
                    :page-size="page.pagesize"
                    :current-page.sync='page.currentPage'
                    @current-change="handleCurrentChange">
            </el-pagination>
        </div>
    </div>
</template>
<script>
    import {wxappList} from "@/api/setup";
    export default {
        created() {
            this.fetchData();
        },
        data() {
            return {
                formInline: {
                    keywords: '',
                },
                list: [
                    {
                        id: '1',
                        mini: '1',
                        num: '20',
                        name: '小程序开发',
                        uniacid: '25',
                        endTime: '2010-08-14  08:20:05',
                        display: '2',
                    },
                ],
                listLoading: true,
                selectRows: "",
                elementLoadingText: "正在加载...",
                page: {
                    total: 0,
                    size: 10,
                    currentPage: 1,
                },
            }
        },
        methods: {
            async fetchData() {
                this.listLoading = true;
                const {data, count} = await wxappList({page: this.page.currentPage,keywords:this.formInline.keywords});
                this.list = data;
                this.page.total = count;
                this.listLoading = false;
            },
            handleCurrentChange(val) {
                this.page.currentPage = val;
                this.fetchData();
            },
            hrefadd(uniacid) {
                this.$router.push(`/appletlistedit?uniacid=${uniacid}`);
            },
            onSubmit(){
                this.fetchData();
            },
        }
    }
</script>
<style lang="scss" scoped>
    .iconimg img{width: 20px;height: 18px;}
</style>
